<template>
  <div class="system-add-menu-container">
    <el-card shadow="hover">
      <div class="system-menu-search mb15">
        <el-input size="small" placeholder="请输入菜单名称" style="max-width: 180px"></el-input>
        <el-button size="small" type="primary" class="ml10" icon="el-icon-search">查询</el-button>
        <el-button size="small" type="success" icon="el-icon-folder-add" class="ml10" @click="onOpenAddEditMenu(null)">新增菜单</el-button>
      </div>

      <el-table :data="menuTableData" style="width: 100%" row-key="path"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="菜单名称" show-overflow-tooltip>
          <template #default="scope">
            <span class="ml10"><i :class="scope.row.meta.icon"></i>&nbsp&nbsp{{ $t(scope.row.meta.title) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由路径" show-overflow-tooltip></el-table-column>
        <el-table-column label="组件路径" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.component }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限标识" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row.meta.roles }}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序" show-overflow-tooltip width="80">
          <template #default="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>
        <el-table-column label="类型" show-overflow-tooltip width="80">
          <template #default="scope">
            <el-tag type="success" size="small">{{ scope.row.xx }}菜单</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip width="140">
          <template #default="scope">
            <el-button size="small" type="text" @click="onOpenAddEditMenu(null)">新增</el-button>
            <el-button size="small" type="text" @click="onOpenAddEditMenu(scope.row)">修改</el-button>
            <el-button size="small" type="text" @click="onTabelRowDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog :title="title" :visible.sync="isShowDialog" width="769px" top="80px" :before-close="DialogClose">
      <el-form :model="ruleForm" size="mini" label-width="80px">
        <el-row :gutter="18">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="上级菜单">
              <el-cascader
                  :options="menuTableData"
                  :props="{ checkStrictly: true, value: 'id', label: 'name' }"
                  placeholder="请选择上级菜单"
                  v-model="ruleForm.parentId"
                  class="w100">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="菜单名称">
              <el-input v-model="ruleForm.meta.title"  placeholder="格式：message.router.xxx" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="路由名称">
              <el-input v-model="ruleForm.name"  placeholder="路由中的 name 值" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="路由路径">
              <el-input v-model="ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="重定向">
              <el-input v-model="ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="菜单图标">
              <template>
                <el-select style="width: 264px" v-model="ruleForm.meta.icon" placeholder="请选择">
                  <el-option
                      :icon="dict.name"
                      v-for="dict in dictList"
                      :key="dict.id"
                      :label="dict.name"
                      :value="dict.name">
                    <span style="float: left"><i :class="dict.name"></i></span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.name }}</span>
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="组件路径">
              <el-input v-model="ruleForm.component" placeholder="组件路径" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="链接地址">
              <el-input v-model="ruleForm.meta.islinks" ref="isLink" placeholder="外链/内嵌时链接地址（http:xxx.com）" clearable :disabled="islinkDis">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="权限标识">
              <el-select multiple v-model="ruleForm.meta.roles" placeholder="选取角色" clearable class="w100">
                <el-option v-for="role in roles" :label="role.roleName" :value="role.roleName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否隐藏">
              <el-radio-group v-model="ruleForm.meta.isHide">
                <el-radio :label="1">隐藏</el-radio>
                <el-radio :label="0">不隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="页面缓存">
              <el-radio-group v-model="ruleForm.meta.isKeepAlive">
                <el-radio :label="1">缓存</el-radio>
                <el-radio :label="0">不缓存</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否固定">
              <el-radio-group v-model="ruleForm.meta.isAffix">
                <el-radio :label="1">固定</el-radio>
                <el-radio :label="0">不固定</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
            <el-form-item label="是否外链">
              <el-radio-group  v-model="ruleForm.meta.isLink" @change="onSelectLinkChange" :disabled="isLink">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="是否内嵌">
              <el-radio-group v-model="ruleForm.meta.isIframe" @change="onSelectIframeChange" :disabled="isIframe">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button size="mini" @click="isShowDialog = false">取 消</el-button>
					<el-button type="primary" size="mini"  @click="onSubmit" >确 定</el-button>
				</span>
      </template>
    </el-dialog>
  </div>

</template>


<script>
import {getMenuAdmin,addMenu,deleteMenu,updateMenu} from '@/api/menu'
import role from "@/api/role";
import dict from "@/api/dict"

export default {
  name: 'systemMenu',
  data() {
    return {
      islinkDis: true,
      isLink: false,
      isIframe:false,
      menuTableData: [], //表格数据
      isShowDialog: false, //新增菜单对话框是否显示
      roles: [],  // 下拉框显示角色
      dictList:[], //显示图标
      ruleForm: { // 新增菜单数据
        meta:{},
      },
      title: "",
    };
  },
  created() {
    this.getMenuList()
  },
  methods: {
    getMenuList() {
      getMenuAdmin().then(resp => {
        this.menuTableData = resp.data
      })
    },
    // 点击菜单信息和修改
    onOpenAddEditMenu(menu) {
      this.isShowDialog = true
      this.getRoles()
      this.getDictList()
      if (menu == null){
        this.title = "新增菜单"
      }else{
        this.title = "修改菜单"
        // 解除编辑时的双向绑定
        let stringify= JSON.stringify(menu); //转成字符串
        this.ruleForm =JSON.parse(stringify);//转回去
        let roles = menu.meta.roles.split(",");
        this.ruleForm.meta.roles = roles
        this.ruleForm.meta.isLink = 0
      }

    },
    // 删除菜单
    onTabelRowDel(row) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu(row).then(resp => {
          console.log(resp)
          this.$message({message: resp.message,type: 'success'});
        })
        }).catch( () => {
        this.$message({type: 'info',message: '已取消删除'})
      })
    },
    // 是否内嵌下拉改变
    onSelectIframeChange(){
      if (this.ruleForm.meta.isIframe == 1) {
        this.islinkDis = false
        this.isLink = true
      }
      else{
        this.islinkDis = true
        this.isLink = false
      }
    },
    onSelectLinkChange(){
      if (this.ruleForm.meta.isLink == 1){
        this.islinkDis = false
        this.isIframe = true
      }
      else{
        this.islinkDis = true
        this.isIframe = false
      }
    },
    // 查询所有角色信息
    getRoles() {
      role.getRoles().then(resp => {
        this.roles = resp.data;
      })
    },
    // 查询所有图标
    getDictList() {
      dict.getDictListById(82009).then(resp => {
        this.dictList = resp.data
      })
    },
    // 新增菜单
    onSubmit(){
      var role = "";
      for (let i = 0; i < this.ruleForm.meta.roles.length; i++) {
        role += this.ruleForm.meta.roles[i]+","
      }
      this.ruleForm.meta.roles = role.substring(0,role.length-1)
      if (this.ruleForm.meta.isIframe == "0" && this.ruleForm.meta.isLink == "0" ){
        this.ruleForm.meta.isLink = ""
      }else{
        this.ruleForm.meta.isLink = this.ruleForm.meta.islinks
      }


      if (this.title == "新增菜单"){
        if (this.ruleForm.parentId != undefined){
          this.ruleForm.parentId = this.ruleForm.parentId[this.ruleForm.parentId.length-1]
        }else{
          this.ruleForm.parentId = 0
        }
        addMenu(this.ruleForm).then(resp => {
          this.$message({message: resp.message,type: 'success'});
          this.isShowDialog = false
          this.getMenuList()
          this.ruleForm = {
            meta: {}
          }

        })
      }else{
        if (this.ruleForm.parentId.length>0){
          this.ruleForm.parentId = this.ruleForm.parentId[this.ruleForm.parentId.length-1]
        }
        updateMenu(this.ruleForm).then(resp => {
          this.$message({message: resp.message,type: 'success'});
          this.isShowDialog = false
          this.getMenuList()
          this.ruleForm = {
            meta: {}
          }
        })
      }
    },
    // 对话框关闭的回调
    DialogClose(done){
      this.ruleForm = {
        meta: {}
      }
      done();
    },
  }
}

</script>


<style>


</style>